<template>
  <div class="wrap">
    <h4 class="head">文章推荐</h4>
    <div class="body">
      <ul class="list">              
        <li v-for="item in list" :key="item.id" @click="handleArticle(item)">
          <div class="main">
            <h5 class="title">{{item.title}}</h5>
            <div class="desc">
                <span>{{item.category.name}}</span>
                <span>{{formatNumber(item.stats.view)}}阅读</span>
            </div>                                                    
          </div>
          <div class="cover">
              <cover-image class="cover-img" :src="item.image_urls[0]" size="@176w_132h" />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import CoverImage from '@/components/CoverImage'
import { formatNumber } from '@/utils'
export default {
  name: 'ArticleRecommend',
  components: {
    CoverImage
  },
  props: {
    list: {
      type: Array
    }
  },
  setup() {
    const router = useRouter()
    const handleArticle = item => {
      router.push({
        name: 'article',
        params: {
          id: item.id
        }
      })      
    }
    return {
      handleArticle,
      formatNumber
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  position: relative;
  border-top: 10px solid #f3f4f4;
  .head{
    position: relative;
    padding: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: $color-text-regular;
    @include border1px(#e7e7e7, 0 0 1px 0);
  }
  
  .body{
    padding: {
      left: 10px;
      right: 10px;
    }
  }
  .list{
    li{
      display: flex;
      padding: {
        top: 10px;
        bottom: 10px;
      };
      @include border1px(#e7e7e7, 0 0 1px 0);
      .main{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .title{
        margin: 0;
        font-size: 14px;
        font-weight: 400;
        color: $color-text-regular;
        line-height: 21px;
        @include max-lines(2);
      }
      .desc{
          font-size: 12px;
          line-height: 17px;
          color: $color-text-secondary;
          span{
              margin-right: 5px;
          }
      }
      .cover{
        width: 88px;                   
      }
      .cover-img {
        padding-bottom: 132 / 176 * 100%;   
      }
    }
  }
}

</style>